<template>
	<view>
		<u-navbar title="我的爱车" :autoBack="false" @leftClick="back"></u-navbar>
		<!-- active -->
		<!-- {{ user.ccp }} -->
		<view class="card u-flex" :class="{ active: user.ccp == item.carnum }" v-for="(item, key) in list" :key="key"
			@click="itemtap(item)">
			<view class="text">
				<view class="pp">
					{{ `${item.qcpp || ""}${item.cx || ""}${item.jtpz || ""}` }}
				</view>
				<view class="carnum">{{ item.carnum }}</view>
			</view>
			<view class="icon" @click.stop="editicontap(item)">
				<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
			</view>
		</view>
		<view v-if="list.length==0" class="nolist">
			{{ $z.$t("当前没有绑定车辆") }}
		</view>
		<fixedbtn>
			<u-button type="primary" size="medium" @click="addfn">
				{{ $z.$t("添加车辆") }}
			</u-button>
		</fixedbtn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				query: {}
			};
		},
		async onLoad(query) {
			this.query = query
			console.log('query', query)
		},
		onShow(query) {

			this.init();
		},
		computed: {
			user() {
				return this.$store.state.user.USearch;
			},
		},
		methods: {
			async back() {
				if (this.query.type == 1) {
					uni.reLaunch({
						url: `/pages/ChargeCarSys/ChargeCarSys?gtel=${this.query.gtel}`
					})
				} else {
					this.$z.back();
				}
				// uni.navigateTo({
				// 	url: `/pages/order/order`
				// })
				// let minje = this.query.minje || 0;
				// let USearch = await this.$store.dispatch("user/getuser");

				// if (this.backType) {
				// 	uni.navigateTo({
				// 		url: `/pages/parkingLock/parkingLock?gtel=${this.gtel}_${this.td}`
				// 	})
				// }

			},
			async init() {
				await this.$store.dispatch("user/getuser");
				let CarmanageinfoSearch = await this.$z.request("/CarmanageinfoSearch", {
					caruser: this.$store.state.user.USearch.uUser
				});
				this.list = CarmanageinfoSearch;
			},
			async editicontap(item) {
				uni.navigateTo({
					url: `/pages/userccp/add/add?id=${item.id}`,
				});
			},
			async itemtap(item) {
				if (item.carnum == this.user.ccp) {
					return;
				}
				uni.showLoading({
					title: this.$z.$t("加载中"),
				});
				await this.$z.request("/Uedtext", {
					b_bxr: this.user.b_bxr || "0",
					ccp: item.carnum,
				});
				await this.$store.dispatch("user/getuser", true);
				uni.hideLoading();
			},
			addfn() {
				uni.navigateTo({
					url: "/pages/userccp/add/add",
				});
			},
		},
	};
</script>

<style lang="scss">
	.nolist {
		color: #666;
		font-size: 28rpx;
		text-align: center;
		padding-top: 30vh;
	}

	.card {
		padding: 0 20rpx;
		padding-bottom: 20rpx;
		padding-top: 10rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

		.text {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.pp {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: flex;
				align-items: center;
				height: 70rpx;
			}

			.carnum {
				font-size: 24rpx;
				color: #666;
			}
		}

		&.active {
			background-color: rgba($color: $uni-color-primary, $alpha: 0.2);
			color: #fff;
		}

		.icon {}
	}
</style>